<template>
	<div class="box" ref="box">
		<van-pull-refresh v-model="isRefresh" @refresh="onRefresh" success-text="刷新成功">
			<div class="banner" v-if="banner.length > 0">
				<van-swipe class="my-swipe" indicator-color="white" :show-indicators="false">
					<van-swipe-item v-for="(item, index) in banner" :key="index"
						><img class="good__cover" @click="toLink(item)" :src="item.url"
					/></van-swipe-item>
				</van-swipe>
			</div>
			<!-- 单品 -->
			<div class="free" v-if="top">
				<div class="free__title">
					{{ top.title }}
				</div>
				<div class="free__good" v-for="(item, index) in top.goods" :key="index" @click="toCoupon(item)">
					<img class="good__cover" :src="item.image" />
					<div class="over-pic" v-if="item.receiveStatus || item.isPurchase">
						<div>
							<div>{{ item.isPurchase ? '已购买' : '已抢完' }}</div>
						</div>
					</div>
					<div class="good__info">
						<p class="title">{{ item.store_name }}</p>
						<div class="price">
							<p class="price__lef">¥{{ item.price }}</p>
							<p class="price__rig">¥{{ item.price }}</p>
							<p class="price__btn"><span>¥</span>{{ item.subsidy_price }}</p>
						</div>
						<div class="btn"><span>立即抢购</span><img src="../../assets/images/today/icon_arrow.png" alt="" /></div>
					</div>
				</div>
			</div>
			<!-- 列表 -->
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getMore">
				<div class="list" v-for="(item, index) in store" :key="index">
					<div class="list__title">{{ item.title }}</div>
					<div class="list__item" v-for="(cItem, cIndex) in item.list" :key="cIndex">
						<img class="item__cover" :src="cItem.pic" alt="" v-if="item.list.length > 0" />
						<div class="over-pic" v-if="item.receiveStatus || item.isPurchase">
							<div>
								<div>{{ item.isPurchase ? '已购买' : '已抢完' }}</div>
							</div>
						</div>
						<div class="item__info">
							<div class="title">
								<img src="../../assets/images/today/icon_tag.png" alt="" />
								{{ cItem.title }}
							</div>
							<p class="sale">已抢{{ cItem.sale }}件</p>
							<div class="price">
								<span>补贴价¥</span>
								<span>{{ cItem.subsidyPrice }}</span>
								<span>¥{{ cItem.price }}</span>
							</div>
							<div class="btn" v-if="cItem.couponId">
								<div class="btn__lef">{{ (Number(cItem.price) - Number(cItem.subsidyPrice)).toFixed(2) }}元</div>
								<div class="btn__rig" @click="toCoupon(cItem)">
									立即抢购<img src="../../assets/images/today/icon_arrow.png" alt="" />
								</div>
							</div>
							<div class="btn2" @click="toCoupon(cItem)" v-else>
								立即抢购<img src="../../assets/images/today/icon_arrow.png" alt="" />
							</div>
						</div>
					</div>
				</div>
			</van-list>
		</van-pull-refresh>
		<div class="flex-icon" @click="toZFX">
			<img class="flex-icon__img" :class="isYao ? 'active' : ''" src="@/assets/images/free/red.png" />
			<div class="flex-icon__value" :class="isAnimation ? 'active' : ''">您有188补贴金待领取哦</div>
		</div>
	</div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant';
import { getStore, setStore, removeStore } from '@/utils/store';
import store from 'store';
import { Toast } from 'vant';
export default {
	components: {
		'van-swipe': Swipe,
		'van-swipe-item': SwipeItem
	},
	data() {
		return {
			params: {
				page: 1,
				size: 0
			},
			page: 1, // 最后一项的Page
			loading: false,
			finished: false,
			config: {},
			banner: [],
			top: null,
			store: [],
			isRefresh: false,
			isYao: false,
			isAnimation: false
		};
	},
	created() {
		this.selfStatistics();
	},
	mounted() {
		setTimeout(() => {
			this.isAnimation = true;
			this.move();
		}, 600);
		this.getConfig();
	},
	methods: {
		selfStatistics() {
			let selfInfo = getStore('selfInfo');
			this.$service.common.common.selfmallStatistics({
				app: 'self',
				channelId: getUrlParams('channel') || '',
				userId: selfInfo.user_id
			});
		},
		toZFX() {
			this.$baiduPush('今日好物', 'tap', '188红包跳转赚分享');
			window.location.href = 'https://zfx.xmonecode.com/?flashsale=2&sdkType=yzf&app=yzf&channel=1012&hybridVersion=3.0';
		},
		toLink(item) {
			if (!item.to_url) return;
			window.location.href = item.to_url;
		},
		onRefresh() {
			this.store = [];
			this.page = 1;
			this.loading = false;
			this.finished = false;
			this.getConfig();
		},
		// 第一次进来会被van-list组件调用
		getMore() {
			let length = this.store.length;
			if (!length) {
				this.loading = false;
				return;
			}
			if (!this.store[length - 1].loadmore) {
				this.loading = false;
				this.finished = true;
				return;
			}
			let item = this.store[length - 1];
			console.log('list', item);
			this.$service.free.index
				.getToadyList({
					page: this.page,
					size: 10,
					activityType: item.activity_type
				})
				.then(res => {
					this.store[length - 1].list ? this.store[length - 1].list : (this.store[length - 1].list = []);
					this.store[length - 1].list.push(...res.list);
					this.$set(this.store, length - 1, { ...item, list: this.store[length - 1].list });
					this.page++;
					this.loading = false;
					res.list.length < 10 ? (this.finished = true) : (this.finished = false);
				});
		},
		getConfig() {
			this.$service.free.index.activityCalendar().then(res => {
				this.banner = res.banner;
				this.top = res.top_goods;
				this.store = res.store;

				this.$refs['box'].style = `background: ${res.background}`;
				this.setTitle(res.title);

				this.getMore();
				this.isRefresh = false;
			});
		},
		setTitle(title) {
			window.BestpayHtml5.APP.setTitleBar({
				title: {
					text: title
				}
			});
		},
		toCoupon(item) {
			let { token, expires_time } = store.get('selfInfo');
			expires_time = expires_time.substring(0, 19).replace(/-/g, '/');
			expires_time = new Date(expires_time).getTime();
			if (!item.receiveStatus && !item.isPurchase && item.couponId) {
				window.location.href = `${this.$selfUrl}/coupon?token=${token}&expires_time=${expires_time}&couponId=${item.couponId}&gid=${item.gid}&from=today`;
				return;
			}
			if (!item.receiveStatus && !item.isPurchase && !item.couponId) {
				window.location.href = `${this.$selfUrl}/detail/${item.id}?token=${token}&expires_time=${expires_time}&from=today`;
			}
		},
		move() {
			let time = setTimeout(() => {
				this.isAnimation = false;
				clearTimeout(time);
			}, 3000);

			let time2 = setTimeout(() => {
				this.isYao = true;
				clearTimeout(time2);
			}, 5000);
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/views/squeeze/common/index.scss';
.box {
	min-height: 100vh;
	background-color: #fcdab5;
	padding-bottom: 100px;
	.banner {
		.my-swipe .van-swipe-item {
			img {
				height: 459px;
				display: block;
			}
		}
	}
	[class*='__title'] {
		display: inline-block;
		min-width: 376px;
		padding: 0 70px;
		height: 100px;
		line-height: 88px;
		margin: 0 auto;
		margin-bottom: 8px;
		background-image: url('../../assets/images/today/bc_title2.png');
		background-size: 100% 100%;
		color: #b2602b;
		font-size: 32px;
		text-align: center;
		font-weight: bold;
	}
	.free {
		font-size: 0;
		padding: 0 22px;
		text-align: center;
		margin-bottom: 18px;
		.free__good {
			position: relative;
			display: flex;
			align-items: flex-start;
			background-color: #fff;
			padding: 16px;
			border-radius: 16px;
			.good__cover {
				width: 284px;
				height: 284px;
				margin-right: 14px;
				flex-shrink: 0;
			}
			.over-pic {
				width: 284px;
				height: 284px;
				background-color: rgba(0, 0, 0, 0.2);
				position: absolute;
				top: 16px;
				left: 16px;
				@include flexBox(center, center);
				& > div {
					width: 130px;
					height: 130px;
					border-radius: 50%;
					background-color: rgba(0, 0, 0, 0.3);
					@include flexBox(center, center);
					& > div {
						width: 105px;
						height: 105px;
						line-height: 100px;
						text-align: center;
						border-radius: 50%;
						border: 1px solid #fff;
						color: #fff;
						font-size: 28px;
						transform: rotate(-45deg);
					}
				}
			}
			.good__info {
				display: inline-block;
				text-align: right;
				width: 370px;
				.title {
					@include ellipsis();
					font-size: 30px;
					color: #a55a1d;
					font-weight: bold;
					margin-bottom: 16px;
				}
				.price {
					position: relative;
					height: 146px;
					margin-bottom: 16px;
					background-image: url('../../assets/images/today/bc_today_top.png');
					background-size: 100% 100%;
					.price__lef,
					.price__rig {
						font-size: 24px;
						color: #666666;
						position: absolute;
						top: 44px;
					}
					.price__lef {
						left: 0;
					}
					.price__rig {
						right: 0;
					}
					.price__btn {
						color: #fff;
						font-size: 40px;
						position: absolute;
						top: 55px;
						left: 126px;
						span {
							font-size: 28px;
						}
					}
				}
				.btn {
					margin: 0 auto;
					width: 264px;
					line-height: 60px;
					border-radius: 30px;
					font-weight: 500;
					font-size: 28px;
					color: #fff;
					text-align: center;
					background-color: #f54f42;
					font-weight: bold;
					span {
						margin-right: 12px;
					}
					img {
						width: 14px;
						height: 20px;
					}
				}
			}
		}
	}
	.list {
		font-size: 0;
		text-align: center;
		min-height: 100px;
		padding: 0 22px;
		.list__item {
			position: relative;
			display: flex;
			padding: 16px;
			background-color: #fff;
			border-radius: 16px;
			margin-bottom: 24px;
			text-align: left;
			.item__cover {
				width: 284px;
				height: 284px;
				display: block;
				margin-right: 18px;
				flex-shrink: 0;
				border-radius: 16px;
			}
			.over-pic {
				width: 284px;
				height: 284px;
				background-color: rgba(0, 0, 0, 0.2);
				position: absolute;
				border-radius: 16px;
				top: 16px;
				left: 16px;
				z-index: 2;
				@include flexBox(center, center);
				& > div {
					width: 130px;
					height: 130px;
					border-radius: 50%;
					background-color: rgba(0, 0, 0, 0.3);
					@include flexBox(center, center);
					& > div {
						width: 105px;
						height: 105px;
						line-height: 100px;
						text-align: center;
						border-radius: 50%;
						border: 1px solid #fff;
						color: #fff;
						font-size: 28px;
						transform: rotate(-45deg);
					}
				}
			}
			.item__info {
				flex: 1;
				overflow: hidden;
				.title {
					font-size: 30px;
					@include ellipsis(2);
					img {
						width: 60px;
						height: 32px;
						vertical-align: middle;
					}
				}
				.sale {
					font-size: 24px;
					color: #666666;
					margin-bottom: 20px;
				}
				.price {
					font-size: 1px;
					margin-bottom: 16px;
					color: #f54f42;
					:nth-child(1) {
						font-size: 28px;
					}
					:nth-child(2) {
						margin-right: 10px;
						font-size: 40px;
						font-weight: bold;
					}
					:nth-child(3) {
						font-size: 24px;
						color: #b5b5b5;
						text-decoration: line-through;
					}
				}
				.btn {
					width: 286px;
					height: 60px;
					background-image: url('../../assets/images/today/bc_btn.png');
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					position: relative;
					left: 86px;
					font-weight: bold;
					.btn__lef {
						min-width: 122px;
						font-size: 26px;
						color: #b2602b;
						padding-bottom: 20px;
						text-align: center;
					}
					.btn__rig {
						width: 164px;
						padding-left: 16px;
						color: #fff;
						font-size: 28px;
						line-height: 1;
						img {
							width: 14px;
							height: 20px;
							margin-left: 8px;
						}
					}
				}
				.btn2 {
					width: 180px;
					line-height: 60px;
					background-color: #f54f42;
					color: #fff;
					font-size: 28px;
					text-align: center;
					border-radius: 8px;
					position: relative;
					left: 186px;
					img {
						width: 14px;
						height: 20px;
						margin-left: 8px;
					}
					// .btn__rig {
					// 	width: 164px;
					// 	padding-left: 16px;
					// 	color: #fff;
					// 	font-size: 28px;
					// 	line-height: 1;
					// 	img {
					// 		width: 14px;
					// 		height: 20px;
					// 		margin-left: 8px;
					// 	}
					// }
				}
			}
		}
	}
	/deep/.van-pull-refresh {
		overflow: visible;
	}
}
</style>
